<template>
    <div class="content">
        <div class="m-content">
            <ul>
                <li>
                    <router-link to='/adddep'>
                    <div class="mokuai01">
                       <span><i class="fa fa-plus-circle fa-4x" aria-hidden="true"></i></span>
                        <a >部门设计</a>
                     </div>
                    </router-link>
                </li>
                <li>
                    <router-link to='/depint'>
                  <div class="mokuai02">
                <span><i class="fa fa-eye fa-4x" aria-hidden="true"></i></span>
                <a >部门信息</a>
                 </div>
                   </router-link>
                </li>
                <li>
                    <router-link to='/employee'>
                   <div class="mokuai03">
                <span><i class="fa fa-users fa-4x" aria-hidden="true"></i></span>
                <a >员工信息</a>
                   </div>
                   </router-link> 
                </li>
                <li>
                    <router-link to='/employee'>
                    <div class="mokuai04">
                <span><i class="fa fa-address-book-o fa-4x" aria-hidden="true"></i></span>
                <a >录入员工</a>
                   </div>
                    </router-link>
                </li>
            </ul>
            
            
            
            
        </div>
    </div>
</template>

<script>
export default {
     name:'HomeContent'

}
</script>
<style >
.content{
    margin-left: 4rem;
    height: 4rem;
}
.m-content{
    margin-top: 1.2rem;
}
.m-content a{
    line-height: 1.6rem;
    margin-left: .7rem;
    font-size: 18px;
    color: #fff;
}
.mokuai01,.mokuai02,.mokuai03,.mokuai04{
    height: 2rem;
    width: 4.4rem;   
    border-radius: 8px;
}
.mokuai01{
    background-color: #ed5564;
}
.m-content span {
    color: #fff;
    position: relative;
    top: .34rem;
    left: .34rem;
    line-height:2rem; 
}
.mokuai02{
    background-color: #1ab394;
}
.mokuai03{
    background-color: #f8ab59;
}
.mokuai04{
    background-color: #22c6cb;
}
.content li{
    float: left;
    margin-left: 2rem;

}
</style>